<template>
  <div class="morecommentsmain">
    <MessageItem
      :items="item"
      v-for="(item, index) in items"
      :key="'newmessageitem_' + index"
    >
      <MessageTemplate :item="item" slot="message"></MessageTemplate>
      <GoodButton :item="item" slot="handle"></GoodButton>
    </MessageItem>
    <BottomCommentInput :items="$store.state.user">
      <input
        v-model="message"
        class="morecommentsmain_input"
        slot="input"
        :placeholder="
          this.$t('lang.以某某身份发布评论', {
            user: items.nickName || $t('lang.未知用户'),
          })
        "
      />
      <a
        href="javascript:;"
        class="morecommentsmain_send"
        @click="commentSendClickHandle"
        slot="handle"
        >{{ $t("lang.发布") }}</a
      >
    </BottomCommentInput>
  </div>
</template>
<script>
export default {
  name: "MoreCommentsMain",
  data() {
    return {
      message: "",
      items: [],
    };
  },
  created() {
    this.items = [
      {
        userId: "0123456",
        userHead: "",
        nickName: "undefined",
        type: 2,
        content: {
          follower: [
            { userHead: "", nickName: "undefined", userId: "0123456" },
          ],
          message: "adfadfadfa adfadfadfa aaa.",
          followTime: 1596094606575,
          goods: 10,
        },
      },
      {
        userId: "0123456",
        userHead: "",
        nickName: "undefined",
        type: 2,
        content: {
          follower: [
            { userHead: "", nickName: "undefined", userId: "0123456" },
          ],
          message:
            "3cadvz vwfda dvzcvzcvzz。adfasdfadfa, adfasdfasdfadf.,dfadfadfafa.d,.adfa",
          followTime: 1596094606575,
          goods: 2,
        },
      },
    ];
  },
  components: {
    MessageTemplate: () =>
      import(
        /* webpackChunkName: "messageTemplate" */ "../../components/message/messageTemplate"
      ),
    MessageItem: () =>
      import(
        /* webpackChunkName: "messageItem" */ "../../components/common/messageItem"
      ),
    GoodButton: () =>
      import(
        /* webpackChunkName:"goodButton" */ "../../components/common/goodButton"
      ),
    BottomCommentInput: () =>
      import(
        /* webpackChunkName:"buttomCommentInput" */ "../../components/common/bottomCommentInput"
      ),
  },
  methods: {
    commentSendClickHandle() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.morecommentsmain {
  padding: 10 / @base 0;
  .goodbutton {
    line-height: 40 / @base;
  }
  a {
    &.morecommentsmain_send {
      display: block;
      color: brown;
      line-height: 46 / @base;
    }
  }
  input {
    &.morecommentsmain_input {
      width: 100%;
      border: 0;
      font-size: 14 / @base;
      padding: 5 / @base 0;
      margin: 10 / @base 0 0;
    }
  }
}
</style>
